<template>
  <div class="app">
    <!-- 用两个样式来控制过度 -->
    <div ref="top" :class="{'top':true,'top_dis':top_dis}">
      <div class="top_an">Anyu</div>
      <div class="top_yu">
        <img @click="drawer = true" src="../../image/icon_fenlei.png" alt />
      </div>
    </div>
    <!-- <div class="top_right"></div> -->
    <el-drawer size="300px" :show-close="close" :visible.sync="drawer" :direction="direction" :before-close="handleClose">
      <div class="top_drawer">
        <div class="Navigation">Navigation</div>
        <a href="http://www.anyu.org.cn/#/" target="_blank"><div class="top_Navigation"><span>◈ </span>首页</div></a>
        <a href="https://www.zcool.com.cn/u/12958348" target="_blank"><div class="top_Navigation"><span>☃ </span>个人设计作品</div></a>
        <a href="http://www.anyu.org.cn/#/cloud" target="_blank"><div class="top_Navigation"><span>✡ </span>LOL云顶之弈</div></a>
        <a href="#Html"><div class="top_Navigation"><span>♨ </span>Html游戏</div></a>
        <div @click="Cli" class="top_Navigation"><span>☇ </span>更多...</div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
export default {
  data: () => ({
    close: false,
    top_dis: false,
    drawer: false,
    direction: 'rtl'
  }),
  created () {
    // 滚轴滚动时触发事件
    document.body.onscroll = () => {
      this.Scroll()
    }
  },
  methods: {
    Scroll () {
      // 获取页面不可见区域高度，根据不可见的高度，来实现效果
      var Top =
        (document.documentElement.scrollTop || 0) +
        (document.body.scrollTop || 0)
      if (Top >= 200) {
        this.top_dis = true
      } else {
        this.top_dis = false
      }
      console.log(Top)
    },
    handleClose (done) {
      done()
    },
    Cli () {
      alert('不用点了，没了')
    }
  }
}
</script>
<style lang="less" scoped>
a{
  text-decoration:none
}
.app{
  z-index: 9999
}
.top {
  width: 100%;
  height: 70px;
  position: fixed;
  top: 0;
  left: 0;
  // background: red;
  transition: 0.3s;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .top_an {
    transition: 0.3s;
    font-size: 24px;
    font-weight: 600;
    color: #ffffff;
    margin-left: 1.25rem;
    display: inline-block;
  }
  .top_yu {
    width: 40px;
    height: 40px;
    margin-right: 1.25rem;
    cursor: pointer;
    img {
      width: 40px;
    }
  }
}
.el-drawer{
  background: red;
}
.top_drawer{
  width: 100%;
  height: 110%;
  background: #2B3E51;
  margin-top: -60px;
  .Navigation{
    font-size: 34px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 15px;
    margin-left: 20px;
    padding-top: 50px;
  }
  .top_Navigation{
    margin-left: 20px;
    width: 240px;
    height: 45px;
    // background: red;
    font-weight: 600;
    color: #57b2d6;
    line-height: 45px;
    padding-left: 15px;
    margin-top: 5px;
    cursor: pointer;
    transition: 0.1s;
    span{
      font-size: 22px;
      display: inline-block;
      width: 27px;
    }
  }
  .top_Navigation:hover{
    color: #358bad;
    background: rgb(236, 236, 236);
  }
}
.top_dis {
  height: 50px;
  background: rgba(0, 0, 0, 0.5);
}
.top_right {
  z-index: 999;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 300px;
  background: red;
}
</style>
